<!DOCTYPE html>
<html class="no-js" lang="zh_CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>可视化表单设计器2.0</title>

<link rel="shortcut icon" href="$!basePath/framework/img/logo.png">
<!-- 必需样式 -->
<link rel="stylesheet" href="$!basePath/framework/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="$!basePath/framework/css/font-awesome.css">
<link rel="stylesheet" href="$!basePath/framework/css/themify-icons.css">
<link rel="stylesheet" href="$!basePath/framework/css/animate.min.css">
<!-- 模板（布局）样式 -->
<link rel="stylesheet" href="$!basePath/framework/css/skins/$!{theme}.css" id="skin">
<link rel="stylesheet" href="$!basePath/framework/css/fonts/font.css">
<link rel="stylesheet" href="$!basePath/app/formdesign/2.0/css/main2.css" />
<!-- 兼容IE9以下的浏览器  -->
<!--[if lt IE 9]>
    <script src="$!basePath/framework/js/html5shiv.js"></script>
    <script src="$!basePath/framework/js/system/respond.min.js"></script>
    <script src="$!basePath/framework/js/json2.js"></script>
<![endif]-->

<!-- load modernizer -->
<script src="$!basePath/framework/plugins/modernizr.js"></script>
<link rel="stylesheet" href="$!basePath/app/formdesign/2.0/css/main.css" />
<link rel="stylesheet" href="$!basePath/framework/plugins/colorpicker/css/colorpicker.css" />
<link rel="stylesheet" href="$!basePath/framework/plugins/select2/select2.css" />
</head>
<body>
	#loading
	<div class="app">
		<section class="layout">
			<aside class="sidebar offscreen-left">
				<header class="header navbar clearfix bg-default pl0 pr0">
					<p class="navbar-text h4">视图控件</p>
				</header>
				<div class="content-wrap no-p">
					<div class="wrapper">
						<nav class="main-navigation bg-default" data-height="auto" data-size="6px" data-distance="0" data-rail-visible="true" data-wheel-step="10">
							<ul class="nav views">
								<li class="open">
									<!-- 布局 --> <a href="javascript:;"> <i class="toggle-accordion"></i> <i class="ti-layout"></i> <span>布局容器</span>
								</a>
									<ul class="sub-menu in" style="background-color: gainsboro;">
										<li><a href="javascript:;"> <span>表格标题</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<div id="v_formtitle" fd-view class="bb h4"><h4 fd-view="formtitle">表单标题</h4></div>
											</div></li>
										<li><a href="javascript:;"> <span>表格</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<table id="v_table" fd-view="table" class="table table-bordered">
													#foreach($!i in [1..3])
													<tr>
														#foreach($!j in [1..4])
														<td fd-view="table_td" class="fd-view-drag-in" style="width:25%;" data="{'style':'width:25%'}"></td> #end
													</tr>
													#end
												</table>
											</div></li>
										<li><a href="javascript:;"> <span>栅格 1-1</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<div class="row" contenteditable="true" fd-view="col12" id="v_col12">
													<div class="col-md-12 fd-view-drag-in fd-view-bordered"></div>
												</div>
											</div></li>
										<li><a href="javascript:;"> <span>栅格 1/2</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<div class="row" contenteditable="true" fd-view="col66" id="v_col66">
													<div class="col-md-6 fd-view-drag-in fd-view-bordered"></div>
													<div class="col-md-6 fd-view-drag-in fd-view-bordered"></div>
												</div>
											</div></li>
										<li><a href="javascript:;"> <span>栅格 1/3</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<div class="row" contenteditable="true" fd-view="col444" id="v_col444">
													<div class="col-md-4 fd-view-drag-in fd-view-bordered"></div>
													<div class="col-md-4 fd-view-drag-in fd-view-bordered"></div>
													<div class="col-md-4 fd-view-drag-in fd-view-bordered"></div>
												</div>
											</div></li>
										<li><a href="javascript:;"> <span>栅格 1/4</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<div class="row" contenteditable="true" fd-view="col3333" id="v_col3333">
													<div class="col-md-3 fd-view-drag-in fd-view-bordered"></div>
													<div class="col-md-3 fd-view-drag-in fd-view-bordered"></div>
													<div class="col-md-3 fd-view-drag-in fd-view-bordered"></div>
													<div class="col-md-3 fd-view-drag-in fd-view-bordered"></div>
												</div>
											</div></li>
										<li><a href="javascript:;"> <span>折叠面板</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<div class="row" contenteditable="true" fd-view="collapsePanel" id="v_collapsePanel">
													<div class="p10">
														<div id="header" class="bordered">
															标题
															<div class="pull-right">
																<a href="javascript:;" id="handler"><i class="ti-arrow-circle-up"></i></a>
															</div>
														</div>
														<div id="content" class="bl br bb fd-view-drag-in"></div>
													</div>
												</div>
											</div></li>
										<li><a href="javascript:;"> <span>动态面板</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<div class="row" contenteditable="true" fd-view="dynamicPanel" id="v_cynamicPanel">
													<div class="p10">
														<div id="header" class="bordered">
															标题
															<div class="pull-right">
																<a href="javascript:;" id="handler" style="cursor: pointer;"><i class="ti-plus"></i> 添加</a>
															</div>
														</div>
														<div id="content" class="bl br bb p10">
															<div class="item mb5">
																<table style="width:100%">
																	<tr>
																		<td style="width:99%">
																			<div class="fd-view-drag-in"></div>
																		</td>
																		<td><a id="closer" class="hide" style="cursor: pointer;"><i class="ti-close"></i> </a></td>
																	</tr>
																</table>
															</div>
														</div>
													</div>
												</div>
											</div></li>
										<li><a href="javascript:;"> <span>横向线条</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<hr fd-view="line" />
											</div></li>
										<li><a href="javascript:;"> <span>换行符</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<br fd-view="br" />
											</div></li>
									</ul>
								</li>
								<li>
									<!-- 基本控件 --> <a href="javascript:;"> <i class="toggle-accordion"></i> <i class="fa fa-cube"></i> <span>基本控件</span>
								</a>
									<ul class="sub-menu in" style="background-color: gainsboro;">
										<li><a href="javascript:;"> <span>标签</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<span contenteditable="true" fd-view="label" id="v_label">标签：</span>
											</div></li>
										<li><a href="javascript:;"> <span>文本框</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<input type="text" class="form-control inline" fd-view="input" id="v_input" style="width:200px" data="{'style':'width:200px;'}" />
											</div></li>
										<li><a href="javascript:;"> <span>密码框</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<input type="password" class="form-control inline" fd-view="password" id="v_password" style="width:200px" data="{'style':'width:200px;'}" />
											</div></li>
										<li><a href="javascript:;"> <span>多行文本</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<textarea class="form-control" fd-view="textarea" id="v_textarea"></textarea>
											</div></li>
										<li><a href="javascript:;"> <span>单选下拉</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<select class="form-control" fd-view="select" id="v_select" style="width:200px" data="{'style':'width:200px;'}">
													<option>选项一</option>
													<option>选项二</option>
												</select>
											</div></li>
										<li><a href="javascript:;"> <span>多选下拉</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<select class="form-control" multiple="multiple" fd-view="mult_select" id="mult_select" style="width:200px" data="{'style':'width:200px;'}">
													<option>选项一</option>
													<option>选项二</option>
												</select>
											</div></li>
										<li><a href="javascript:;"> <span>单选按钮</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<label class="radio-inline"> <input type="radio" fd-view="radio" id="v_radio"> <span fd-view="label" contenteditable="true">单选按钮</span>
												</label>
											</div></li>
										<li><a href="javascript:;"> <span>复选按钮</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<label class="checkbox-inline"> <input type="checkbox" fd-view="checkbox" id="v_checkbox"><span fd-view="label" contenteditable="true">复选按钮</span>
												</label>
											</div></li>
										<li><a href="javascript:;"> <span>上传文件</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<input type="file" class="form-control inline" fd-view="fileupload" id="v_fileupload">
											</div></li>
										<li><a href="javascript:;"> <span>图片</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<img src="" alt="" fd-view="image" id="v_image" />
											</div></li>
										<li><a href="javascript:;"> <span>日期选择</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<input type="text" class="form-control inline datepicker" fd-view="datepicker" id="v_datepicker" style="width:250px" data="{'style':'width:250px;'}"
													data-date-format="yyyy-mm-dd">
											</div></li>
										<li><a href="javascript:;"> <span>普通按钮</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<button type="button" class="btn btn-default btn-block" fd-view="button" id="v_button">按 钮</button>
											</div></li>
										<li><a href="javascript:;"> <span>提交按钮</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<button type="submit" class="btn btn-default btn-block" fd-view="submit" id="v_submit">提 交</button>
											</div></li>
									</ul>
								</li>
								<!-- 扩展控件 -->
								<li><a href="javascript:;"> <i class="toggle-accordion"></i> <i class="fa fa-cubes"></i> <span>组合控件</span>
								</a>
									<ul class="sub-menu in" style="background-color: gainsboro;">
										<li><a href="javascript:;"> <span>标签+文本框</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<table fd-move fd-view="label_input" id="v_label_input" style="width:100%">
													<tr>
														<td fd-view="table_td" style="min-width:5%;width:8%"><span contenteditable="true" fd-view="label" fd-label>标签：</span></td>
														<td fd-view="table_td"><input type="text" class="form-control" fd-view="input" /></td>
													</tr>
												</table>
											</div></li>
										<li><a href="javascript:;"> <span>标签+密码框</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<table fd-move fd-view="label_password" id="v_label_password" style="width:100%">
													<tr>
														<td fd-view="table_td" style="min-width:5%;width:8%"><span contenteditable="true" fd-view="label" fd-label>标签：</span></td>
														<td fd-view="table_td"><input type="text" class="form-control" fd-view="password" /></td>
													</tr>
												</table>
											</div></li>
										<li><a href="javascript:;"> <span>标签+多行文本</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<table fd-move fd-view="label_textarea" id="v_label_textarea" style="width:100%">
													<tr>
														<td fd-view="table_td" style="min-width:5%;width:8%"><span contenteditable="true" fd-view="label" fd-label>标签：</span></td>
														<td fd-view="table_td"><textarea class="form-control" fd-view="textarea"></textarea></td>
													</tr>
												</table>
											</div></li>
										<li><a href="javascript:;"> <span>标签+单选下拉</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<table fd-move fd-view="label_textarea" id="v_label_textarea" style="width:100%">
													<tr>
														<td fd-view="table_td" style="min-width:5%;width:8%"><span contenteditable="true" fd-view="label" fd-label>标签：</span></td>
														<td fd-view="table_td"><select class="form-control" fd-view="select"">
																<option>选项一</option>
																<option>选项二</option>
														</select></td>
													</tr>
												</table>
											</div></li>
										<li><a href="javascript:;"> <span>单选按钮组</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<div fd-move fd-view="radio_group" id="v_label_input">
													#foreach($!i in [1..3]) <label class="radio-inline"> <input type="radio" name="radio1" fd-view="radio" id="v_radio"> <span fd-view="label"
														contenteditable="true">名称</span>
													</label> #end
												</div>
											</div></li>
										<li><a href="javascript:;"> <span>复选按钮组</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<div fd-move fd-view="checkbox_group" id="v_checkbox_input">
													#foreach($!i in [1..3]) <label class="checkbox-inline"> <input type="checkbox" name="checkbox1" fd-view="checkbox" id="v_checkbox"><span
														fd-view="label" contenteditable="true">名称</span>
													</label> #end
												</div>
											</div></li>
										<li><a href="javascript:;"> <span>日期区间</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<div fd-view="datepickerrange" id="v_datepickerrange">
													<input id="start" type="text" fd-view="datepicker" class="form-control inline datepicker" style="width:50%" data-date-format="yyyy-mm-dd"> - <input
														id="end" type="text" fd-view="datepicker" class="form-control inline datepicker" style="width:50%" data-date-format="yyyy-mm-dd">
												</div>
											</div></li>
										<li><a href="javascript:;"> <span>金额区间</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<div fd-view="moneyrange" id="v_moneyrange">
													<input id="start" type="text" fd-view="input" class="form-control inline" style="width:40%;text-align:right;" placeholder="￥" rules="money"
														data="{'rules':['money'],'css_align':'right'}"> - <input id="end" type="text" fd-view="input" class="form-control inline"
														style="width:40%;text-align:right;" placeholder="￥" rules="money" data="{'rules':['money'],'css_align':'right'}">
												</div>
											</div></li>
										<li><a href="javascript:;"> <span>动态下拉表格</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<div fd-view="dynamictable" id="v_dynamictable" class="input-group inline">
													<input type="text" class="form-control inline" readonly="readonly">
													<span class="input-group-btn">
														<button class="btn btn-default" type="button">选择</button>
													</span>
												</div>
											</div></li>
									</ul></li>
								<li><a href="javascript:;"> <i class="toggle-accordion"></i> <i class="ti-layers"></i> <span>扩展控件</span>
								</a>
									<ul class="sub-menu in" style="background-color: gainsboro;">
										<li><a href="javascript:;"> <span>宏控件</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<span fd-view="macros">{宏控件}</span>
											</div></li>
										<li><a href="javascript:;"> <span>流程变量</span> <i class="fd-view-drag ti-move pull-right"></i>
										</a>
											<div class="view hide">
												<span class="disabled" fd-view="variable">{流程变量}</span>
											</div>
										</li>
										<li>
											<a href="javascript:;"> <span>列表控件</span> <i class="fd-view-drag ti-move pull-right"></i></a>
											<div class="view hide">
												<span class="form-control" fd-view="list">{列表控件}</span>
											</div>
										</li>
										<li>
											<a href="javascript:;"> <span>提示控件</span> <i class="fd-view-drag ti-move pull-right"></i></a>
											<div class="view hide">
													<div class="alert alert-warning mt5" fd-view="alert">这是提示信息！！！</div>
											</div>
										</li>
									</ul>
								</li>
							</ul>
						</nav>
					</div>
				</div>
			</aside>
			<!-- 内容主体 -->
			<section class="main-content bg-white">
				<header class="header navbar bg-default">
					<div class="btn-group navbar-btn">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-table"></i> 表格操作 <span class="caret"></span>
						</button>
						<ul class="dropdown-menu">
							<li><a href="javascript:;" onclick="fd.design.table.merge()"><i class="fa fa-columns"></i> 合并单元格</a></li>
							<li><a href="javascript:;" onclick="fd.design.table.insertRow('up')"><i class="fa fa-th"></i> 上方增加一行</a></li>
							<li><a href="javascript:;" onclick="fd.design.table.insertRow('down')"><i class="fa fa-th"></i> 下方增加一行</a></li>
							<li><a href="javascript:;" onclick="fd.design.table.insertCol('left')"><i class="ti-layout-column2"></i> 左侧增加一列</a></li>
							<li><a href="javascript:;" onclick="fd.design.table.insertCol('right')"><i class="ti-layout-column2"></i> 右侧增加一列</a></li>
						</ul>
					</div>
					<div class="btn-group navbar-btn">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-retweet"></i> 切换模式 <span class="caret"></span>
						</button>
						<ul class="dropdown-menu">
							<li id="btnEditMode"><a href="javascript:;" onclick="fd.design.editMode('#editMode')"><i class="fa fa-code"></i> 源码编辑模式</a></li>
							<li id="btnEditScript" class="hide"><a href="javascript:;" onclick="fd.design.editScript('#editScript')"><i class="fa fa-bug"></i> 脚本编辑模式</a></li>
							<!-- 未完成 -->
							<li id="btnEnableDrag"><a href="javascript:;" onclick="fd.design.enabledrag('#btnEnableDrag','#btnDisableDrag')"><i class="fa fa-arrows"></i> 开启控件移动</a></li>
							<li id="btnDisableDrag" class="hide"><a href="javascript:;" onclick="fd.design.disabledrag('#btnEnableDrag','#btnDisableDrag')"><i class="fa fa-arrows"></i>
									关闭控件移动</a></li>
						</ul>
					</div>
					<div class="btn-group navbar-btn">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-arrows"></i> 移动布局 <span class="caret"></span>
						</button>
						<ul class="dropdown-menu">
							<li><a href="javascript:;" onclick="fd.design.move('up')"><i class="fa fa-arrow-circle-up"></i> 向上(左)移动</a></li>
							<li><a href="javascript:;" onclick="fd.design.move('down')"><i class="fa fa-arrow-circle-down"></i> 向下(右)移动</a></li>
						</ul>
					</div>
					<div class="pull-right">
						<button type="button" class="btn btn-default navbar-btn" onclick="fd.design.remove()">
							<i class="fa fa-trash"></i> 删除选中
						</button>
						<button type="button" class="btn btn-default navbar-btn" onclick="fd.design.save()">
							<i class="fa fa-save"></i> 保存
						</button>
						<div class="btn-group navbar-btn">
							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
								更多 <span class="caret"></span>
							</button>
							<ul class="dropdown-menu pull-right">
								<li><a href="javascript:;" onclick="fd.design.redo()"><i class="fa fa-rotate-left"></i> 重做</a></li>
								<!--<li><a href="javascript:;" onclick="fd.design.preview()"><i class="fa fa-eye"></i> 预览</a></li>-->
								<li><a href="javascript:;" onclick="fd.design.saveAndPreview()"><i class="fa fa-eye"></i> 保存并预览</a></li>
							</ul>
						</div>
						<button id="btnShowProp" type="button" class="btn btn-default navbar-btn hide" onclick="fd.design.showProperties(this, '#btnHideProp', '#asidePanel')">
							<i class="ti-angle-double-left"></i> 属性面板
						</button>
						<button id="btnHideProp" type="button" class="btn btn-default navbar-btn" onclick="fd.design.hideProperties(this, '#btnShowProp', '#asidePanel')">
							属性面板 <i class="ti-angle-double-right"></i>
						</button>
					</div>
				</header>
				<div class="content-wrap p10">
					<div class="wrapper no-p" autoheight="false">
						#if($!form) $!form.source #else
						<div class="containers fd-view-drag-in">
							<div class="hide" id="script"></div>
						</div>
						#end
						<form id="previewForm" action="$!basePath/bi/form/design/v2/preview" method="post" target="_blank">
							<textarea name="html" class="hide"></textarea>
						</form>
						<div class="alert alert-warning m5">
							按住Ctrl键可多选，按照Alt键选择整个控件
						</div>
					</div>

					<a class="exit-offscreen"></a>
				</div>
			</section>
			<aside id="asidePanel" class="sidebar-250 canvas-right bg-default">
				<div class="box-tab no-b">
					<ul class="nav nav-tabs nav-tabs nav-justified" role="tablist" id="propertyTab">
						<li class="active"><a href="#pro_content1" data-toggle="tab">表单属性</a></li>
						<li><a href="#pro_content2" data-toggle="tab">控件属性</a></li>
					</ul>
					<div class="tab-content no-p">
						<div class="tab-pane fade active in p15" id="pro_content1">
							<div class="properties">
								<div class="form-group">
									<label>样式</label> <select class="form-control" name="formClass" onchange="$(fd.config.containerPanel).attr('class', 'containers fd-view-drag-in '+this.value)">
										<option value="">无</option>
										<optgroup label="背景">
											<option value="bg-default">bg-default</option>
											<option value="bg-primary">bg-primary</option>
											<option value="bg-info">bg-info</option>
											<option value="bg-warning">bg-warning</option>
											<option value="bg-success">bg-success</option>
											<option value="bg-danger">bg-danger</option>
										</optgroup>
										<optgroup label="文字">
											<option value="text-muted">text-muted</option>
											<option value="text-primary">text-primary</option>
											<option value="text-info">text-info</option>
											<option value="text-warning">text-warning</option>
											<option value="text-success">text-success</option>
											<option value="text-danger">text-danger</option>
										</optgroup>
									</select>
								</div>
								<div class="form-group">
									<label>背景颜色</label> <input type="text" name="formBgColor" class="form-control colorPicker" placeholder="#FFFFF"
										onblur="$(fd.config.containerPanel).css('backgroundColor', this.value)">
								</div>
								<div class="form-group hide">
									<label>表单完成提示</label>
									<textarea name="formTip" class="form-control">$!form.tip</textarea>
								</div>
							</div>
						</div>
						<div class="tab-pane fade pt15 pl5 pr5" id="pro_content2">
							<div class="properties">
								<div class="panel-group" id="accordion">
									<div class="panel">
										<div class="panel-heading">
											<a data-toggle="collapse" data-parent="#accordion" href="#c1" class="collapsed"><i class="ti-menu-alt"></i> 常规</a>
										</div>
										<div id="c1" class="panel-collapse collapse">
											<div class="panel-body bg-default">
												<div class="form-group" fd-property="field">
													<label>数据字段</label> <select class="select2" style="width:100%" name="field" id="p_field">
													#foreach($!table in $!tables)
													#if($!table == $!primary)
														<optgroup label="$!table(主表)">
															#foreach($!col in $!columns)
															#if($!col.get(2) == $!table)
															<option value="$!col.get(0)">$!col.get(1)</option>
															#end
															#end
														</optgroup>
													#end
													#end
													#foreach($!table in $!tables)
													#if($!table != $!primary)
														<optgroup label="$!{table}(子表)">
															#foreach($!col in $!columns)
															#if($!col.get(2) == $!table)
															<option value="$!{table}.$!col.get(0)">$!col.get(1)</option>
															#end
															#end
														</optgroup>
													#end
													#end
													</select>
												</div>
												<div class="form-group" fd-property="id">
													<label>标识</label> <input type="text" name="id" class="form-control" placeholder="控件ID" />
												</div>
												<div class="form-group" fd-property="name">
													<label>控件名称</label> <input type="text" name="name" class="form-control" placeholder="控件名称" />
												</div>
												<div class="form-group" fd-property="value">
													<label>默认值</label> <input type="text" name="value" class="form-control" placeholder="控件值" />
												</div>
												<div class="form-group" fd-property="text">
													<label>显示文本</label> <input type="text" name="text" class="form-control" placeholder="显示文本" />
												</div>
												<div class="form-group" fd-property="label_text">
													<label>显示文本</label> <input type="text" name="label_text" class="form-control" placeholder="显示文本" />
												</div>
												<div class="form-group" fd-property="placeholder">
													<label>提示文本</label> <input type="text" name="placeholder" class="form-control" placeholder="提示">
												</div>
												<div class="form-group" fd-property="url">
													<label>URL地址</label> <input type="text" name="url" class="form-control" placeholder="URL地址">
												</div>
												<div class="form-group" fd-property="type">
													<label>控件类型</label> <select class="form-control" name="type">
														<optgroup label="文本框类型">
															<option value="text">text</option>
															<option value="password">password</option>
															<option value="number">number</option>
															<option value="email">email</option>
															<option value="hidden">hidden</option>
														</optgroup>
														<optgroup label="按钮类型">
															<option value="button">button</option>
															<option value="submit">submit</option>
														</optgroup>
													</select>
												</div>
												<div class="form-group" fd-property="dateFormat">
													<label>日期格式</label> <select class="form-control" name="dateFormat">
														<option value="yyyy年mm月dd日">yyyy年mm月dd日</option>
														<option value="yyyy/mm/dd">yyyy/mm/dd</option>
														<option value="yyyy-mm-dd">yyyy-mm-dd</option>
														<option value="yyyy年mm月">yyyy年mm月</option>
														<option value="yyyy/mm">yyyy/mm</option>
														<option value="yyyy-mm">yyyy-mm</option>
													</select>
												</div>
											</div>
										</div>
									</div>
									<div class="panel">
										<div class="panel-heading">
											<a data-toggle="collapse" data-parent="#accordion" href="#c2"><i class="ti-layout-slider"></i> 文本/密码</a>
										</div>
										<div id="c2" class="panel-collapse collapse">
											<div class="panel-body bg-default">
												<div class="form-group" fd-property="maxlength">
													<label>最大长度maxlength</label> <input type="text" name="maxlength" class="form-control" placeholder="最大长度" />
												</div>
												<div class="form-group" fd-property="readonly">
													<label>只读</label> <select class="form-control" name="readonly">
														<option value="false">否</option>
														<option value="true">是</option>
													</select>
												</div>
											</div>
										</div>
									</div>
									<div class="panel">
										<div class="panel-heading">
											<a data-toggle="collapse" data-parent="#accordion" href="#c3"><i class="ti-check-box"></i> 单选/复选框</a>
										</div>
										<div id="c3" class="panel-collapse collapse">
											<div class="panel-body bg-default">
												<div class="form-group" fd-property="checked">
													<label>选中</label> <select class="form-control" name="checked">
														<option value="false">否</option>
														<option value="true">是</option>
													</select>
												</div>
												<div class="form-group" fd-property="number">
													<label>数量</label> <input type="text" name="number" class="form-control" placeholder="数量">
												</div>
											</div>
										</div>
									</div>
									<div class="panel">
										<div class="panel-heading">
											<a data-toggle="collapse" data-parent="#accordion" href="#c4"><i class="ti-palette"></i> 样式</a>
										</div>
										<div id="c4" class="panel-collapse collapse">
											<div class="panel-body bg-default">
												<div class="form-group" fd-property="css_align">
													<label>对齐方式</label> <select class="form-control" name="css_align">
														<option value="left">左对齐</option>
														<option value="center">居中对齐</option>
														<option value="right">右对齐</option>
													</select>
												</div>
												<div class="form-group" fd-property="css_fontColor">
													<label>文字颜色</label> <input type="text" name="css_fontColor" class="form-control colorPicker" placeholder="#FFFFFF" />
												</div>
												<div class="form-group" fd-property="css_backgroundColor">
													<label>背景颜色</label> <input type="text" name="css_backgroundColor" class="form-control colorPicker" placeholder="#FFFFFF" />
												</div>
												<div class="form-group" fd-property="css_width">
													<label>宽度</label> <input type="text" name="css_width" class="form-control" placeholder="px" />
												</div>
												<div class="form-group" fd-property="css_height">
													<label>高度</label> <input type="text" name="css_height" class="form-control" placeholder="px" />
												</div>
												<div class="form-group" fd-property="css_padding">
													<label>内填充</label> <input type="text" name="css_padding" class="form-control" placeholder="上  右  下  左" />
												</div>
												<div class="form-group" fd-property="css_margin">
													<label>外填充</label> <input type="text" name="css_margin" class="form-control" placeholder="上  右  下  左" />
												</div>
											</div>
										</div>
									</div>
									<div class="panel">
										<div class="panel-heading">
											<a data-toggle="collapse" data-parent="#accordion" href="#c5"><i class="ti-info-alt"></i> CSS/辅助功能</a>
										</div>
										<div id="c5" class="panel-collapse collapse">
											<div class="panel-body bg-default">
												<div class="form-group" fd-property="$class">
													<label>Class</label> <input type="text" name="$class" class="form-control" placeholder="样式" />
												</div>
												<div class="form-group" fd-property="style">
													<label>Style</label>
													<textarea class="form-control" name="style"></textarea>
												</div>
												<div class="form-group" fd-property="title">
													<label>Title</label> <input type="text" name="title" class="form-control" placeholder="鼠标悬浮时显示的文本" />
												</div>
											</div>
										</div>
									</div>
									<div class="panel">
										<div class="panel-heading">
											<a data-toggle="collapse" data-parent="#accordion" href="#c6"><i class="ti-lock"></i> 验证规则</a>
										</div>
										<div id="c6" class="panel-collapse collapse">
											<div class="panel-body bg-default">
												<div class="form-group" fd-property="required">
													<label>必填项</label> <select class="form-control" name="controlRequired">
														<option value="false">否</option>
														<option value="true">是</option>
													</select>
												</div>
												<div class="form-group" fd-property="rules">
													<label>规则</label> <select class="" name="rules" style="width:100%; height:100px;border: 1px solid #e3e6f3;border-radius: 2px;" multiple>
														<option value="none">无</option>
														<option value="id">身份证</option>
														<option value="mobile">手机号码</option>
														<option value="email">电子邮件</option>
														<option value="qq">QQ</option>
														<option value="ip">IP地址</option>
														<option value="english">英文字母</option>
														<option value="integer">非负整数</option>
														<option value="englishAndNum">字母+数字</option>
														<option value="chinese">汉字</option>
														<option value="number" class="hide">负整数</option>
														<option value="number2">整数</option>
														<option value="money">金额</option>
													</select>
												</div>

											</div>
										</div>
									</div>
									<div class="panel">
										<div class="panel-heading">
											<a data-toggle="collapse" data-parent="#accordion" href="#c7"><i class="ti-more"></i> 其他</a>
										</div>
										<div id="c7" class="panel-collapse collapse">
											<div class="panel-body bg-default">
												<div class="form-group" fd-property="datalist">
													<label>列表数据</label>
													<button class="btn btn-info form-control">数据设置</button>
												</div>
												<div class="form-group" fd-property="remote">
													<label>远程数据</label>
													<textarea name="remote" class="form-control" placeholder="输入数据接口地址"></textarea>
												</div>
												<div class="form-group hide" fd-property="table_rows">
													<label>行数</label> <input type="number" name="controlTableRows" class="form-control" placeholder="数字" />
												</div>
												<div class="form-group hide" fd-property="table_cols">
													<label>列数</label> <input type="number" name="controlTableCols" class="form-control" placeholder="数字" />
												</div>
												<div class="form-group hide" fd-property="table_header_show">
													<label>表头显示</label>
													<select class="form-control" name="controlRequired">
														<option value="true">是</option>
														<option value="false">否</option>
													</select>
												</div>
												<div class="form-group hide" fd-property="editable">
													<label>可编辑</label>
													<select class="form-control" name="controlRequired">
														<option value="true">是</option>
														<option value="false">否</option>
													</select>
												</div>
												<div class="form-group" fd-property="macros">
													<label>宏类型</label> <select class="form-control" name="controlMacros">
														<optgroup label="日期宏控件">
															<option value="dt_yyyy-MM-dd HH:mm">当前日期+时间[1992-12-01 12:00]</option>
															<option value="dt_yyyy-MM-dd HH:mm:ss">当前日期+时间[1992-12-01 12:00:00]</option>
															<option value="dt_yyyy-MM-dd">当前日期[1997-01-01]</option>
															<option value="dt_yyyy年MM月dd日">当前日期[1997年01月01日]</option>
															<option value="dt_yyyy年MM月">当前日期[1997年01月]</option>
															<option value="dt_MM月dd日">当前日期[01月01日]</option>
															<option value="dt_yyyy">当前年份[1992]</option>
															<option value="dt_yyyy年">当前年份[1992年]</option>
															<option value="dt_HH:mm">当前时间[12:00]</option>
															<option value="dt_HH:mm:ss">当前时间[12:00:00]</option>
															<option value="dt_week">当前星期[星期一]</option>
														</optgroup>
														<optgroup label="常用参数">
															<option value="user_id">当前用户ID</option>
															<option value="user_realname">当前用户姓名</option>
															<option value="user_unitname">当前用户部门名称</option>
														</optgroup>
													</select>
												</div>
												<div class="form-group" fd-property="script">
													<!-- 未完成 -->
													<label>脚本</label>
													<textarea name="script" class="form-control" placeholder="要执行的脚本"></textarea>
												</div>
												<div class="form-group hide" fd-property="datasource">
													<label>数据源</label>
													<select class="form-control" name="controlRequired">
														<option value="">无</option>
														#foreach($!obj in $!dsList)
														<option value="$!obj.id">$!obj.name</option>
														#end
													</select>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</aside>
		</section>
	</div>
	<!-- 列表设置 -->
	<div id="listDataModal" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">固定数据</h4>
				</div>
				<div class="modal-body">
					<table class="table">
						<thead>
							<tr>
								<th class="col-md-5">值</th>
								<th class="col-md-5">文本</th>
								<th>选中</th>
								<th></th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>
				<div class="modal-footer">
					<div class="pull-left">
						<button id="btnAddItem" type="button" class="btn btn-default">添加一项</button>
					</div>
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button id="btnOk" type="button" class="btn btn-primary">确 定</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 编辑模式 -->
	<div id="editMode" class="modal fade">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">源码编辑</h4>
				</div>
				<div class="modal-body">
					<textarea class="form-control" style="width:100%;"></textarea>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button id="btnOk" type="button" class="btn btn-primary">确 定</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 脚本编辑 -->
	<div id="editScript" class="modal fade">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">脚本编辑</h4>
				</div>
				<div class="modal-body">
					<textarea class="form-control" style="width:100%;"></textarea>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button id="btnOk" type="button" class="btn btn-primary">确 定</button>
				</div>
			</div>
		</div>
	</div>
	#required_js
	<!-- 页面组件 -->
	<script type="text/javascript" src="$!basePath/app/formdesign/jquery.dragg.min.js"></script>
	<script type="text/javascript" src="$!basePath/app/formdesign/mod_codebeautify.js"></script>
	<script type="text/javascript" src="$!basePath/framework/plugins/colorpicker/js/bootstrap-colorpicker.js"></script>
	<script type="text/javascript" src="$!basePath/framework/js/view/toast.js"></script>
	<script type="text/javascript" src="$!basePath/framework/plugins/select2/select2.min.js"></script>

	<!-- 本页面脚本 -->
	<script type="text/javascript" src="$!basePath/app/formdesign/2.0/formdesign.js"></script>
	<script type="text/javascript" src="$!basePath/app/formdesign/2.0/formdesign.config.js"></script>
	<script type="text/javascript" src="$!basePath/app/formdesign/2.0/formdesign.design.js"></script>

	<script type="text/javascript">
		$(function() {
			fd.design.init();
			$(".select2").select2();
		});
		//保存form到服务器
		var _form = {
			id : "$!form.id",
			primaryTable : "$!primary",
			table : "$!table"
		};
		function preview() {
		    if(!window.winPreview || window.winPreview.closed){
				window.winPreview = window.open("$!basePath/bi/form/design/v2/preview/" + _form.id);
			} else{
		        window.winPreview.location.reload();
			}
		}
		function saveForm(callback) {
			var form = $(fd.config.containerPanel);
			if (form.children().length == 1) {
				return ns.tip.alert("请先添加视图控件到表单容器中");
			}
			if (_form.id.length == 0) {
				ns.tip.prompt("请输入表单名称", function(name) {
					_saveForm(callback, true, name);
				});
			} else {
				_saveForm(callback, true, "");
			}
		}
		var timer = undefined;
		function _saveForm(callback, showTip, name) {
			ns.showLoadingbar();
			var html = fd.design._html();
			jQuery.post("$!basePath/bi/form/design/v2/save", {
				html : html,
				name : name,
				id : _form.id,
				primaryTable : _form.primaryTable,
				table : _form.table
			}, function(data) {
				if (data.success == true) {
					_form.id = data.id;
					if (showTip)
						ns.tip.toast.success("保存成功！");
					if (!timer)//定时5分钟保存一次
						timer = setInterval(function() {
							_saveForm(null, false, "");
						}, 1000 * 60 * 5);
				} else {
					ns.tip.toast.error(data.error);
				}
				ns.closeLoadingbar();
				if (typeof (callback) == "function")
					callback();
			});
		}
	</script>
	#loading_close
</body>
</html>